<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
</head>
<body>
<h1>ajax的基本方式</h1>
<h2>注册</h2>
<form action="" method="post">
    <p><input type="text" name="username" placeholder="username" id="username"><span id="warning"></span></p>
    <p><input type="password" name="password" placeholder="password"></p>
    <p><input type="submit" value="提交"></p>
</form>
<script type="text/javascript">
    // 通过jquery获取表单对象 同时不定失去焦点事件
    $('#username').on('blur', function () {
        // http请求  判定用户名是否已经存在
        console.log(this.value)
        // ajax  通过js的方式发送http请求
        $.ajax({
            url: '/app08/ajax/username',  // http 请求地址
            //data: {username: this.value},  // 请求参数
            data: JSON.stringify({username: this.value}),  // 请求参数 json字符串
            contentType: 'application/json;charset=utf-8',  // 请求参数是json格式时  需要声明
            type: 'POST',  // 请求方式   GET POST
            async: true,  // 是否发送异步请求  false  同步  默认 true 异步
            dataType: 'JSON', //响应结果的数据类型
            success: function (res) {  // 请求成功的回调函数
                if (res.code == 110) {
                    $('#warning').text(res.message).css('color', 'red')
                }

                if (res.code == 200) {
                    $('#warning').text(res.message).css('color', 'green')
                }
            },
            error: function () {  // 请求失败的回调函数
                console.log('请求失败!!!')
            }
        })
    })
</script>
</body>
</html>